<!--
 * @Date: 2023-08-14 09:35:46
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-08-24 17:14:06
 * @FilePath: \part-cloud-appd:\project\company\veteran-cadre-app\src\components\mine\user-head.vue
-->
<script setup lang="ts">
import topBg from '~/static/images/mine/top-bg.png'
import { backgroundBase64 } from '@/util/utils'
import { useAppStore } from '@/stores/app-store'
import achieveIcon from '~/static/images/mine/achieve.png'
import elliptic from '~/static/images/mine/elliptic.png'
import identityIcon from '~/static/images/mine/identity1.png'

const appStore = useAppStore()

const page = reactive({
})
onShow(() => {
})

function onEditInfo() {
  if (appStore.onClickDis() !== 3)
    return
  router.push('/pages-sub/user/register?pageType=1')
}
</script>

<template>
  <div class="relative h-383rpx">
    <div
      class="bg-cover bg-no-repeat absolute h-383rpx w-750rpx left-0 right-0 top-0"
      :style="{
        'background-image': `url(${backgroundBase64(topBg)})`,
      }"
    />
    <app-nav title="个人中心" :show-back-icon="false" bg-color="#4FAE98" />
    <div class="box">
      <div class="flex items-center">
        <div class="mr-30rpx bg-#999 rounded-25rpx h-120rpx w-120rpx overflow-hidden" @click="onEditInfo">
          <uni-icons v-if="!appStore.state.loginInfoRes" type="person-filled" size="60" color="#DCDFE6" />
          <image
            v-if="appStore.state.loginInfoRes"
            class="block h-full w-full"
            :src="appStore.state.loginInfoRes?.avg"
            mode="aspectFill"
          />
        </div>
        <div class="flex flex-col">
          <div class="text-40rpx text-#333" @click="onEditInfo">
            {{ appStore.state.loginInfoRes?.name || '点击登录' }}
          </div>
          <div v-if="!appStore.state.loginInfoRes?.name" class="h-42rpx w-130rpx" />
          <div v-if="appStore.state.loginInfoRes?.name" class="mt-20rpx relative h-42rpx w-130rpx">
            <image
              class="block absolute h-full w-full left-0 top-0"
              :src="identityIcon"
              mode="scaleToFill"
            />
            <text class="text-20rpx text-white absolute bottom-4rpx right-22rpx z-2">
              {{ appStore.state.role.tipLbale }}
            </text>
          </div>
        </div>
      </div>
      <div
        class="right-img" :style="{
          'background-image': `url(${backgroundBase64(elliptic)})`,
        }"
      >
        <image
          class="img"
          :src="achieveIcon"
          mode="scaleToFill"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: auto;
  margin-left: 30rpx;
  padding-left: 48rpx;
  border: 1px solid white;
  border-radius: 25rpx;
  width: 696rpx;
  height: 250rpx;
  bottom: -28rpx;
  z-index: 55;
  background: linear-gradient(180deg, #7BC6B5 0%, #FFFFFF 99%);
  overflow: hidden;
}
.right-img{
  position: absolute;
  right: 0;
  top: -50rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 250rpx;
  height: 340rpx;
  .img{
    width: 170rpx;
    height: 170rpx;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 36rpx;
  }
}
</style>
